<template>
  <div id="app">
    <!-- 3D画布 -->
    <canvas ref="canvas" id="canvas"></canvas>
    
    <!-- 控制面板 -->
    <div class="controls-panel">
      <h3>控制面板</h3>
      <div class="control-group">
        <label>
          <input type="checkbox" v-model="simulate" @change="toggleSimulation"> 
          启动模拟
        </label>
      </div>
      <div class="control-group">
        <label>K值: {{ kValue }}</label>
        <input type="range" v-model="kValue" min="1" max="1000" step="1">
      </div>
      <div class="control-group">
        <label>温度: {{ temperature.toFixed(2) }}</label>
      </div>
      <div class="control-group">
        <button @click="resetLayout">重置布局</button>
      </div>
      <div class="control-group">
        <label>布局模式:</label>
        <select v-model="layoutMode" @change="changeLayout">
          <option value="force">力导向</option>
          <option value="circle">圆形</option>
          <option value="sphere">球形</option>
          <option value="helix">螺旋</option>
          <option value="grid">网格</option>
        </select>
      </div>
      <div class="control-group">
        <label>动画时间: {{ animationDuration / 1000 }}秒</label>
        <input type="range" v-model="animationDuration" min="500" max="5000" step="100" @input="updateAnimationDuration">
      </div>
      <div class="control-group">
        <label>缓动类型:</label>
        <select v-model="easingType" @change="updateEasingType">
          <option value="easeInOutCubic">平滑</option>
          <option value="easeOutElastic">弹性</option>
          <option value="easeInOutQuart">强烈</option>
        </select>
      </div>
      <div class="control-group">
        <label>
          <input type="checkbox" v-model="autoRotate" @change="toggleAutoRotate"> 
          自动旋转
        </label>
      </div>
      <div class="control-group">
        <button @click="resetCamera">重置相机</button>
      </div>
    </div>

    <!-- 时间滑块 -->
    <div class="time-slider" v-if="timeRange.min !== timeRange.max">
      <label>时间范围: {{ formatTime(currentTimeRange.min) }} - {{ formatTime(currentTimeRange.max) }}</label>
      <input 
        type="range" 
        v-model="currentTimeRange.min" 
        :min="timeRange.min" 
        :max="timeRange.max" 
        step="1"
        style="width: 100%">
    </div>

    <!-- 说明文字 -->
    <div class="instruction">
      点击节点查看邻居，双击清除选择
    </div>

    <!-- 页脚 -->
    <div class="footer">
      <span><a href="https://github.com" target="_blank">GitHub</a></span>
      <span> | </span>
      <span>3D网络图可视化 Vue3版</span>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import NetworkRenderer from './components/NetworkRenderer.js'

export default {
  name: 'App',
  setup() {
    const canvas = ref(null)
    const simulate = ref(false)
    const kValue = ref(100)
    const temperature = ref(100)
    const layoutMode = ref('force')
    const timeRange = ref({ min: 0, max: 0 })
    const currentTimeRange = ref({ min: 0, max: 0 })
    const animationDuration = ref(2000)
    const easingType = ref('easeInOutCubic')
    const autoRotate = ref(false)
    
    let networkRenderer = null

    const toggleSimulation = () => {
      if (networkRenderer) {
        networkRenderer.setSimulation(simulate.value)
      }
    }

    const resetLayout = () => {
      if (networkRenderer) {
        networkRenderer.resetLayout()
        temperature.value = 100
      }
    }

    const changeLayout = () => {
      if (networkRenderer) {
        networkRenderer.setLayoutMode(layoutMode.value)
      }
    }

    const formatTime = (timestamp) => {
      return new Date(timestamp * 1000).toLocaleString()
    }

    const updateAnimationDuration = () => {
      if (networkRenderer) {
        networkRenderer.setAnimationDuration(animationDuration.value)
      }
    }

    const updateEasingType = () => {
      if (networkRenderer) {
        networkRenderer.setEasingType(easingType.value)
      }
    }

    const toggleAutoRotate = () => {
      if (networkRenderer) {
        networkRenderer.setAutoRotate(autoRotate.value)
      }
    }

    const resetCamera = () => {
      if (networkRenderer) {
        networkRenderer.resetCamera()
      }
    }

    // 监听K值变化
    watch(kValue, (newValue) => {
      if (networkRenderer) {
        networkRenderer.setKValue(newValue)
      }
    })

    // 监听时间范围变化
    watch(currentTimeRange, (newRange) => {
      if (networkRenderer) {
        networkRenderer.setTimeRange(newRange.min, newRange.max)
      }
    }, { deep: true })

    onMounted(() => {
      if (canvas.value) {
        networkRenderer = new NetworkRenderer(canvas.value)
        networkRenderer.init()
        
        // 设置数据更新回调
        networkRenderer.onDataUpdate = (data) => {
          if (data.timeRange) {
            timeRange.value = data.timeRange
            currentTimeRange.value = { ...data.timeRange }
          }
          if (data.temperature !== undefined) {
            temperature.value = data.temperature
          }
        }

        // 加载示例数据
        networkRenderer.loadSampleData()
      }
    })

    onUnmounted(() => {
      if (networkRenderer) {
        networkRenderer.dispose()
      }
    })

    return {
      canvas,
      simulate,
      kValue,
      temperature,
      layoutMode,
      timeRange,
      currentTimeRange,
      animationDuration,
      easingType,
      autoRotate,
      toggleSimulation,
      resetLayout,
      changeLayout,
      formatTime,
      updateAnimationDuration,
      updateEasingType,
      toggleAutoRotate,
      resetCamera
    }
  }
}
</script>
